<template>
	<view>
		<view class="header">
			<i class="ri-function-fill" style="color:#7800BE;font-size:18px;"></i>
			<!-- <i-icon size="20upx" color="#7800BE" name="function-fill"></i-icon> -->
			控制台
		</view>
		<view class="bll" style="margin: 50px 100px 50px 50px;">
			<view style="width: 70%;">
				<view class="bc" style="margin-bottom: 25px;">
					<i class="ri-time-fill" style="color:#7800BE;font-size:18px;"></i>
					<!-- <i-icon size="26upx" color="#7800BE" name="time-fill"></i-icon> -->
					<view class="h5">今日资金概况</view>
				</view>
				<view class="bc">
					<view class="bk" style="width: 33.3%;">
						<i class="ri-money-cny-circle-fill" style="color:#7800BE;font-size:42px;"></i>
						<!-- <i-icon size="60upx" color="#7800BE" name="money-cny-circle-fill"></i-icon> -->
						<view class="">
							资金账户余额
						</view>
						<view class="f30">
							￥{{accountInfo.balance}}
						</view>
					</view>
					<view class="bk" style="width: 33.3%;">
						<i class="ri-funds-fill" style="color:#7800BE;font-size:42px;"></i>
						<!-- <i-icon size="60upx" color="#7800BE" name="funds-fill"></i-icon> -->
						<view class="">
							支付给业主
						</view>
						<view class="f30">
							￥{{accountInfo.aggregateAnmtmt}}
						</view>
					</view>
					<view class="bk" style="width: 33.3%;">
						<i class="ri-shopping-bag-3-fill" style="color:#7800BE;font-size:42px;"></i>
						<!-- <i-icon size="60upx" color="#7800BE" name="shopping-bag-3-fill"></i-icon> -->
						<view class="">
							提现金额
						</view>
						<view class="f30">
							￥{{accountInfo.withdrawSum}}
						</view>
					</view>
				</view>
				<view class="bc" style="margin-bottom: 25px;margin-top: 45px;">
					<i class="ri-time-fill" style="color:#7800BE;font-size:18px;"></i>
					<!-- <i-icon size="26upx" color="#7800BE" name="time-fill"></i-icon> -->
					<view class="h5">今日废旧概览</view>
				</view>
				<view class="bk" v-if="toDayWasteList.length != 0">
					<table  style="margin-top: 35px;">
						<tr>
							<td>站点</td>
							<td>废旧</td>
							<td>单价</td>
							<td>单位</td>
							<td>数量</td>
						</tr>
						<tr v-for="two in toDayWasteList">
							<td>{{two.stationName}}</td>
							<td>{{two.recycleName}}</td>
							<td>￥{{two.price}}</td>
							<td>{{two.unit}}</td>
							<td>{{two.quantity}}</td>
						</tr>
						
					</table>
				</view>
				<view v-else>今日暂无废旧回收交易</view>
			</view>
			<view style="width: 30%;">
				<view class="bc" style="margin-bottom: 25px;">
					<i class="ri-user-2-fill" style="color:#7800BE;font-size:18px;"></i>
					<!-- <i-icon size="26upx" color="#7800BE" name="user-2-fill"></i-icon> -->
					<view class="h5">今日新增用户</view>
				</view>
				<view class="bk" style="width: 100%;">
					<view v-if="toDayList.length != 0">
						<teble v-for="day in toDayList">
							<tr>
								<view class="bl bx">
									<view class="bc">
										<view class="user">
											<image :src="'http://admin.yunshuicha.com'+day.imgPath" mode='scaleToFill'>
											</image>
										</view>
										<view class="bc">
											<view class="mo">{{day.phone}}</view>
											<view class="xbg">{{day.gender}}</view>
										</view>
									</view>
									<view class="">{{day.createDatetime}}</view>
								</view>
							</tr>
						</teble>
					</view>
					<view class="bl bx" v-else>
						<view class="bc">
							今日暂无新增用户
						</view>
					</view>
				</view>
				<view class="bc" style="margin-bottom: 25px;margin-top: 50px;">
					<i class="ri-vip-crown-2-fill" style="color:#7800BE;font-size:14px;"></i>
					<!-- <i-icon size="26upx" color="#7800BE" name="vip-crown-2-fill"></i-icon> -->
					<view class="h5">站点人数排行</view>
				</view>
				<view class="bk" style="width: 100%;">
					
					<view class="bl bx" v-for="top in numberTop">
						<view class="bc">
							<view class="nb">
								{{top.index}}
							</view>
							<view class="bc">
								<view class="mo">{{top.villageName}}</view>
							</view>
						</view>
						<view class="">服务{{top.helpCont}}人</view>
					</view>
					
				</view>
			</view>
		</view>

	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				numberTop: [], //站点排行榜
				accountInfo: {}, //主账号信息
				toDayList: [],//今日新增用户
				toDayWasteList:[],//今天垃圾
			}
		},
		onLoad() {
			this.getNumberTop(); //获取站点排行榜
			this.getToDayUser(); //获取今日新增用户
			this.getGuiMinAccountData(); //获取主账号信息
			this.getToDayWasteInfo();//获取今日垃圾
		},
		methods: {
			/**
			 * 获取今日新增用户
			 */
			getToDayUser() {
				uni.request({
					url: this.baseURL + '/to/day',
					method: 'POST',
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res)
						if (res.data.success == true) {
							this.toDayList = [];
							this.toDayList = res.data.data;
						} else {
							this.toDayList = [];
						}
					},
					fail: (err) => {
						console.log(err)
						uni.showToast({
							title: '暂无数据',
							duration: 3000,
							icon: 'error'
						})
					}
				})
			},
			/**
			 * 站点人数排行
			 */
			getNumberTop() {
				uni.request({
					url: this.baseURL + '/guiminSite/number/top',
					method: 'POST',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						//JSON.stringify(res)
						//console.log(JSON.stringify(res))
						if (res.data.success == true) {
							this.numberTop = res.data.data;
						} else {
							uni.showToast({
								title: '暂无数据',
								icon: 'error',
								duration: 2000
							})
						}
					},
					fail: (err) => {
						console.log(err)
						uni.showToast({
							title: "请求异常，请稍后重试",
							icon: 'error',
							duration: 2000
						})
					}
				})
			},
			/**
			 * 获取主账号数据
			 */
			getGuiMinAccountData() {
				uni.request({
					url: this.baseURL + '/com/gmAcc/info',
					method: 'POST',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res)
						if (res.data.success == true) {
							this.accountInfo = res.data.data;
						} else {
							uni.showToast({
								title: '暂无数据',
								icon: 'error',
								duration: 2000
							})
						}
					},
					fail: (err) => {
						console.log(err)
						uni.showToast({
							title: "请求异常，请稍后重试",
							icon: 'error',
							duration: 2000
						})
					}
				})
			},
			/**
			 * 获取今日垃圾买卖详情
			 */
			getToDayWasteInfo(){
				let _this = this;
				uni.request({
					url: _this.baseURL + '/com/to/day/waste',
					method: 'POST',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res)
						if (res.data.success == true) {
							_this.toDayWasteList = res.data.data;
						} else {
							uni.showToast({
								title: '暂无数据',
								icon: 'error',
								duration: 2000
							})
						}
					},
					fail: (err) => {
						console.log(err)
						uni.showToast({
							title: "请求异常，请稍后重试",
							icon: 'error',
							duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style>
	.h5 {
		color: #004D40;
		font-size: 30px;
		margin-left: 10px;
	}

	.nb {
		width: 30px;
		height: 30px;
		border-radius: 30px;
		text-align: center;
		background-color: #FF0000;
		color: #fff;
		line-height: 30px;
	}

	.bk {
		background-color: #fff;
		border-radius: 8px;
		padding: 30px;
		margin-right: 25px;
	}

	.b15 {
		margin-bottom: 15px;
	}

	.t30 {
		margin-top: 30px;
	}

	.user image {
		width: 50px;
		height: 50px;
		border-radius: 50px;
	}

	.bx {
		margin-bottom: 20px;
	}

	.mo {
		font-size: 20px;
		margin-left: 15px;
		margin-bottom: 3px;
	}

	.bll {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: top;
	}

	.f20 {
		font-size: 20px;
		color: #7800BE;
	}

	.f30 {
		font-size: 30px;
		margin-top: 15px;
		color: #7800BE;
	}

	.xbg {
		background-color: #F05B4F;
		border-radius: 15px;
		color: #fff;
		font-size: 12px;
		padding: 5px;
		text-align: center;
		width: 30px;
		margin-left: 15px;
	}

	.fj {
		text-align: center;
		margin-left: 25px;
		margin-right: 25px;
	}

	.xbb {
		background-color: #004D40;
		border-radius: 15px;
		color: #fff;
		font-size: 12px;
		padding: 5px;
		text-align: center;
		width: 30px;
		margin-left: 15px;
	}
</style>
